<script setup>
import { onLoad,onReady, onReachBottom } from "@dcloudio/uni-app";
import { ref } from "vue";
import {getShopListAPI} from '/src/api/page/pageApi'

const shopList = ref([])
const shopTotal = ref(0)
const pagenum = ref(1)
const pagesize = ref(10)
const uToastRef = ref(null);


// 判断到底了
onReachBottom(()=>{
  console.log('到底了',shopList.value.length!==0,shopList.value.length, typeof shopTotal,shopList.value.length,shopTotal.value);
  if (shopList.value.length!==0&&shopList.value.length < Number(shopTotal.value)) {
    pagenum.value = pagenum.value + 1
    getShoplist()
  }else{
    uToastRef.value.show({
      type: 'success',
      message: "到底了",
    });
  }
})


// 请求商品列表，首页
async function getShoplist(option={pagenum:pagenum.value,pagesize:pagesize.value}){
  const {state, msg, total, list} = await getShopListAPI(option);
  if(state === 200){
    console.log(list, '商品列表');
    if (shopList.value.length>0&&shopList.value.length<shopTotal.value) {
      shopList.value = [...shopList.value, ...list];
    } else if(shopList.value.length === 0){
      shopList.value = list;
    }
    shopTotal.value = Number(total)
  }else{
    uToastRef.value.show({
      type: 'error',
      message: msg,
    });
  }
}

onLoad((option)=>{
  uni.showToast({
    icon:'loading'
  })
  if(option.id){
    getShoplist()
  } else {
    shopList.value = []
  }
})

onReady(()=>{
  uni.hideToast()
})

function onToShopInfo(id,url){
  uni.navigateTo({
    url:'/classification/shopInfo/shopInfo?id='+id+'&img='+url
  })
}

</script>

<template>

  <up-toast ref="uToastRef"></up-toast>
<view style="background:#f8f8f8;height:100vh;">
  <view class="header">
    <view><up-input
        placeholder="前置图标"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
        customStyle="width: 530rpx;height: 61rpx;background: #fff;border-radius: 40rpx;margin: auto;"
    ></up-input></view>
    <view class="header-title">搜索</view>
  </view>
  <view class="nav">
    <view class="nav-1">销量</view>
    <view class="nav-2">价格</view>
    <view class="nav-3">筛选</view>
  </view>
<!--  330rpx-->
  <view class="content">
    <up-empty v-if="shopList.length === 0"
              mode="data"
    ></up-empty>
    <view class="content-box" @click="onToShopInfo(item.goods_id,item.goods_img)" v-for="(item,index) in shopList" :key="index">
      <image class="content-image" :src="item.goods_img"></image>
      <view class="h2">{{ item.goods_name }}</view>
      <view class="h2">￥{{ item.shop_price }}</view>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
.header{
  width:750rpx;
  background:#f8f8f8;
  display:flex;
  align-items: center;
  justify-content: center;
  .header-title{
    font-size:30rpx;
    margin-left:30rpx;
  }
}
.nav{
  width:627rpx;
  padding-top:30rpx;
  display:flex;
  justify-content: space-between;
  background:#f8f8f8;
  margin:auto;
}
// content
.content{
  width:750rpx;
  display:flex;
  flex-wrap:wrap;
  .content-box{
    width:345rpx;
    box-sizing: border-box;
    padding:10rpx;
    margin-top:30rpx;
    background:#fff;
    border-radius:10rpx;
    margin-left:20rpx;
    .content-image{
      width:325rpx;
      height:227rpx;
    }
    .h2{
      font-size:30rpx;
      font-weight: 900;
      margin-bottom:10rpx;
      width:80%; /* 设置一个固定宽度 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 超出隐藏 */
      text-overflow: ellipsis;
    }
  }
}
</style>